<template>
  <div class="ul_list">
    <input type="text" v-model="inputValue">
    <transition-group  tag="ul"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave">
      <li v-for="(item,index) in showNums"
      :key="index">{{ item }}</li>
    </transition-group>
  </div>
</template>
<script>
import gsap from 'gsap'
export default {
  data () {
    return {
      inputValue: '',
      lists: ['abcg', 'abpo', 'mka', 'kisu', 'bgcv']
    }
  },
  methods: {
    beforeEnter (el) {
      // el.style.opacity = 0
      // el.style.height = 0
    },
    enter (el, done) {
      // eslint-disable-next-line no-undef
      gsap.from(el, {
        opacity: 1,
        height: '1.5em',
        onComplete: done
      })
    },
    leave (el, done) {
      // eslint-disable-next-line no-undef
      gsap.to(el, {
        opacity: 0,
        height: '0em',
        onComplete: true
      })
    }
  },
  computed: {
    showNums () {
      return this.lists.filter(item => item.indexOf(this.inputValue) !== -1)
    }
  }
}
</script>
<style scoped>
</style>
